
<template>
	<view>		
		<view class="title">忘记密码</view>
		<view class="card">
			<view class="item">
				<view class="text iconfont22">&#xe60e;</view>
				<input type="text" v-model="name" placeholder="请输入账号" />
			</view>
			<view class="item">
				<view class="text iconfont22">&#xe60e;</view>
				<input type="text" v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="item">
				<view class="text iconfont22">&#xe63d;</view>
				<input type="text" v-model="yzm" placeholder="短信验证码" />
				<view class="yzm" @tap="sendMsg" style="z-index: 9999;">{{tip}}</view>
			</view>
			<view class="item">
				<view class="text iconfont22">&#xe62c;</view>
				<input type="password" v-model="pwd" placeholder="请输入新密码" />
			</view>
			<view class="item">
				<view class="text iconfont22">&#xe62c;</view>
				<input type="password" v-model="pwd2" placeholder="请再次输入新密码" />
			</view>
		</view>
		<view class="but-color1" @tap="rePass">确定</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				phone:'',
				yzm:'',
				pwd:'',
				pwd2:'',
				tip:'验证码',
				sms:false,
				working:false,				
			}
		},
		methods: {
			
		rePass(){
		var that = this;
		     
			if(!that.name || !that.phone || !that.yzm || !that.pwd)
			{
				that.Msg.Fail('请输入完整信息');
				return
			}
		
			if(that.pwd!=that.pwd2)
			{
				that.Msg.Fail('2次密码不一致');
				return
			}
			that.Net._get('forgetPwd',{name:that.name,phone:that.phone,code:that.yzm,pwd1:that.pwd,pwd2:that.pwd2},(res)=>{
				if(res.code ==1){
					that.Msg.Success('修改成功',()=>{
					uni.navigateBack({
						
					})
					})
				}
			});
		},				
		sendMsg(){
			let me = this;
			let phone = me.phone;
			if(!me.phone)
			{
				me.Msg.Fail('请填写手机号')
				return
			}
			
			
		me.sec = 59;
			
		
		me.Net._get('code',{phone:me.phone,event:'up'},(res)=>{
			if(res.code ==1){
				me.Msg.Success('发送成功')
				me.timer = setInterval(()=>{
					me.sec = me.sec - 1;
					if(me.sec<=1){
						me.tip ="重发验证码"
						clearInterval(me.timer)
					}else{
						me.tip = `${me.sec}秒后重发`
					}
				},1000)	
			}
		});
			// if(phone=='' || phone == null || !me.He.mobile(phone)){
			// 	me.He.Fail('请输入正确的手机号')
			// 	me.sms = false;
			// 	return false;
			// }
		
		}
		}
	}
</script>
<style>
	page {
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.title{
		font-size: 5vw;
		color: #333;
		padding-top: 8vh;
		margin-bottom: 5vh;
		margin-left: 10vw;
		font-weight: bold;
	}
	.card{
		margin-top: 20upx;
		width: 94%;
		background: #FFFFFF;
		border-radius: 15rpx;
		box-shadow: 0 0  10rpx #d6d6d6;
		padding: 60rpx 0;
		margin-left: 3%;
		.item{			
			width: 80vw;
			margin: 0 auto;
			display: flex;
			align-items: center;
			margin-top: 2vh;
			position: relative;
			border-bottom: 1px solid #eee;
			line-height: 80upx;
			padding-bottom: 20upx;
			&:first-child{
				margin-top: 10px;
			}			
			text{
				margin-right: 5vw;
			}
			input{
				flex:1;
				height: 80upx;
				padding-left: 50upx;	
			}			
			.yzm{
				position: absolute;
				right: 10px;
				top:16upx;
				border: 1px solid #4d726f;
				padding:0 30upx;
				line-height: 50upx;
				border-radius: 5px;
				color: #4d726f;
				font-size: 12px;
			}
		}
	}
	.btn{
		width: 80vw;		
		background-color: #4d726f;
		border: none;
		color: #fff;
		text-align: center;
		margin: auto;
		margin-top: 10vh;
		padding: 10px 0px;
		border-radius: 5px;
	}
</style>